<script setup lang="ts">
import myTitle from "@/components/myTitle/myTitle.vue";
import doctorInfo from "@/components/zhq-listItem/index.vue";
const gridList = ref([
  {
    id: 1,
    src: "/src/static/doctor/1.png",
    title: "皮肤科",
  },
  {
    id: 2,
    src: "/src/static/doctor/2.png",
    title: "儿科",
  },
  {
    id: 3,
    src: "/src/static/doctor/3.png",
    title: "妇科",
  },
  {
    id: 4,
    src: "/src/static/doctor/4.png",
    title: "产科",
  },
  {
    id: 5,
    src: "/src/static/doctor/5.png",
    title: "消化内科",
  },
  {
    id: 6,
    src: "/src/static/doctor/6.png",
    title: "泌尿外科",
  },
  {
    id: 7,
    src: "/src/static/doctor/7.png",
    title: "骨科",
  },
  {
    id: 8,
    src: "/src/static/doctor/8.png",
    title: "普通内科",
  },
  {
    id: 9,
    src: "/src/static/doctor/9.png",
    title: "普内科",
  },
  {
    id: 10,
    src: "/src/static/doctor/10.png",
    title: "呼吸内科",
  },
  {
    id: 11,
    src: "/src/static/doctor/11.png",
    title: "普外科",
  },
  {
    id: 12,
    src: "/src/static/doctor/12.png",
    title: "眼科",
  },
]);
const tabs = ref([
  "皮肤科",
  "儿科",
  "妇科",
  "产科",
  "消化内科",
  "泌尿外科",
  "骨科",
  "普通内科",
  "普内科",
  "呼吸内科",
  "普外科",
  "眼科",
]);
const tab = ref("皮肤科");
// 输入框获取焦点后跳转搜索页面
const cancel = () => {
  uni.navigateTo({
    url: "/pages/AskDoctor/components/doctorSearch",
  });
};

function Tzjswz() {
  uni.navigateTo({ url: "/pages/RapidConsultation/index" });
}
</script>

<template>
  <!-- 头部 -->
  <myTitle lefe-text="问医生" right-text="问诊记录" fixed="ture" :ifText="true" :ifToHome="true" />
  <!-- 搜索框 -->
  <wd-search
    custom-input-class="inputClass"
    placeholder-left
    placeholder="搜一搜：医生/疾病名称"
    cancel-txt="搜索"
    @focus="cancel"
  />
  <view class="bg-[#FFFFFF]">
    <!-- 图片 -->
    <view class="bg-[#FAFAFA] rounded-40rpx mx-auto my-0 w-690rpx h-144rpx" @click="Tzjswz">
      <wd-img width="100%" height="100%" mode="aspectFit" src="/src/static/doctor/0.png" />
    </view>
    <!-- 小标题 -->
    <view class="mb-0 mx-auto my-30rpx w-9/10 h-60 flex justify-between">
      <text class="font-bold">按科室找医生</text>
      <text>更多科室</text>
    </view>
    <!-- 宫格 -->
    <wd-grid
      class="bg-[#FAFAFA] rounded-40rpx mx-auto my-30rpx w-690rpx"
      bg-color="#FAFAFA"
      :column="4"
    >
      <wd-grid-item v-for="item in gridList" :key="item.id" use-icon-slot use-text-slot>
        <template #icon>
          <image class="h-50rpx w-50rpx slot-img" :src="item.src" />
        </template>
        <template #text>
          <view
            class="text-center tracking-[0px] leading-36rpx text-24rpx font-medium text-[#121826]"
          >
            {{ item.title }}
          </view>
        </template>
      </wd-grid-item>
    </wd-grid>
    <!-- 小标题 -->
    <view class="w-[90%] mx-auto my-0">
      <text class="font-bold">名医推荐</text>
      <view class="text-[rgb(204,204,204)] font-size-24">获取更多的诊疗建议</view>
    </view>
  </view>

  <!-- 名医科室切换 -->
  <wd-tabs v-model="tab" auto-line-width slidable="always" animated>
    <block v-for="item in tabs" :key="item">
      <wd-tab :title="`${item}`" :name="item">
        <doctorInfo v-for="index in 3" :key="index" />
      </wd-tab>
    </block>
  </wd-tabs>
</template>

<style lang="scss" scoped>
:deep(.uni-scroll-view) {
  scrollbar-width: none !important;
}

.inputClass {
  background-color: red !important;
}
</style>
